<template>
  <div id="myTeacher">
    <div class="title">
      <a :href="imgHref"><img id="schoolImg" src="../assets/Top.png" :alt="imgAlt" ></a>
      <a :href="nameHref"><span id="schoolName">{{ schoolName }}</span></a>
      <div id="userExitDiv">
        <a id="user" :href="userHref">{{ userName }}</a>
        <a :href="exitHref"><img id="exitImg" src="../assets/Exit.png" alt="exitAlt" @click="exitAlert"></a>
      </div>
     </div>
     <div>

     <div class="teac-main">
         <ul class="teac-mainnav clear">
             <li class="current"><a href="javascript:void(0);">{{mainnavName}}</a></li>
         </ul>
     </div>

     <div class="csnav clear">
         <button class="nav-b">
             {{buttonName}}
         </button>
     </div>
<div class="content">
    <div class="contab"></div>
    <table>
        <thead>
        <tr>
            <td>{{teacher.term}}</td>
            <td>{{teacher.courseName}}</td>
            <td>{{teacher.teacherName}}</td>
            <td>{{teacher.gender}}</td>
            <td>{{teacher.telephone}}</td>
            <td>{{teacher.mail}}</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="teacher in teachers">
            <td>{{teacher.term}}</td>
            <td>{{teacher.courseName}}</td>
            <td><a href="#">{{teacher.teacherName}}</a></td>
            <td>{{teacher.gender}}</td>
            <td>{{teacher.telephone}}</td>
            <td>{{teacher.mail}}</td>
        </tr>
        </tbody>
    </table>
    <div class="pageContain">
        共有<span class="totalPageNum">{{recordNumber}}</span>条记录/<span class="totalPageNum">{{recordPage}}</span>页
        当前：第<span class="totalPageNum">{{currentPage}}</span>页
        <a class="first page" href="javascript:;">首页</a>
        <a class=" pre page" href="javascript:;">上一页</a>
        <a class="next page" href="javascript:;">下一页</a>
        <a class="last page" href="javascript:;">尾页</a>
    </div>
</div>

  </div>
</template>

<script>
  export default {
    name: 'myTeacher',
    data () {
      return {
        imgHref: 'http://www.samsph.com/',//医院官网
        nameHref: 'http://www.samsph.com/hsxx/1092/1/',//学校官网
        userHref: '',//预想跳转到个人信息相关界面
        exitHref: '',//预留备用
        schoolName: '护士学校',
        userName: '您好,李华!',
        imgAlt: '四川省医科科学院·四川省人民医院',
        exitAlt: '退出图标',
        mainnavName:'我的老师',
        buttonName:'刷新',
        recordNumber:'2',
        recordPage:'1',
        currentPage:'一',
        teacher: {
                      term: '学期学年',
                      courseName: '课程名称',
                      teacherName: '教师姓名',
                      gender: '性别',
                      telephone:'移动电话',
                      mail:'邮箱'
                  },
                  teachers: [{
                      term: '2016-2017 1',
                      courseName: '企业合作课程I',
                      teacherName: '兰刚',
                      gender: '男',
                      telephone:'13000000000',
                      mail:'124387@qq.com'
                  }, {
                      term: '2015-2016 1',
                      courseName: 'FPGA硬件设计',
                      teacherName:'王琳',
                      gender:'女',
                      telephone:'12333333333',
                      mail:'348789@163.com'
                  },
                  {}, {},{},{},{}]
      }
    },
    methods: {
      exitAlert: function () {
        //仅供测试，预想是注销并返回登录页面
        if(confirm("您确定要退出并关闭页面吗？")){
          window.close();
        }
      }
    }
  }
</script>

<style scoped>

  .clear {
      display: block;
  }
  .clear:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  a{
    text-decoration: none;
  }
  #myTeacher{
    text-align: left;
    background-color: white;
  }
  .title{
     width: 90%;
     margin: 0 auto;
  }
  #schoolImg{
    width: 35%;
    height: 4rem;
    border-right: 0.1rem solid whitesmoke;
    padding: 0.5rem;
  }
  #schoolName{
    color: grey;
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    bottom: 2rem;
  }
  #userExitDiv{
    float: right;
    display: flex;
    align-items: flex-end;
    position: relative;
    top: 1rem;
  }
  #user{
    color: black;
    text-decoration: none;
    font-size: 1rem;
  }
  #exitImg{
    position: relative;
    top: 0.75rem;
    width: 2rem;
    height: 2rem;
  }
  .teac-main{
      background-color: #1d7f65;
      width: 100%;
  }
  .teac-mainnav{
      margin-left: 3.5rem;
      width: 100%;
      padding-left: 0;
  }
  .teac-mainnav > li {
      float: left;
      width: 17%;
      text-align: center;
      list-style: none;
      background: #1d7f65;
  }
  .teac-mainnav > li > a {
      color: #fff;
      display: block;
      font-size: 1.2rem;
      padding: 1.5rem 1rem;
      text-decoration: none;
  }
  .teac-mainnav > li.current{
      background: #17a43f;
  }

  .csnav{
      width: 100%;
      height: 5rem;
      background: #ffffff;
  }

  .nav-b{
      width: 10rem;
      height: 3rem;
      border: none;
      border-radius: 0.5rem;
      background-color: #23995f;
      cursor: pointer;
      margin: 0 auto;
      font-size: 1.2rem;
      float: right;
      color: #fff;
      margin: 0.5rem 8rem 0 0;
  }
  .nav-b:hover{
      background-color: #41b37b;
  }


  .content{
      width: 100%;
      background: #f0f3f8;
      text-align: center;
  }
  .contab{
      width: 100%;
      height: 2rem;
  }
  table{
      border-collapse:collapse;
      margin: 0 auto;
      width: 90%;
  }
  thead{
      margin-top: 2rem;
  }

  td {
      border: 1px solid #e3e3e3;
      width: 10%;
      height: 3rem;
      background: #fff;

  }

  .pageContain{
      text-align: right;
      font-size: 1.2rem;
      width: 95%;
      margin: 1rem 0;
  }
  .page{
      display: inline-block;
      width: 4rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
      color: #000409;
      text-decoration: none;
  }
  .moveTo{
      width: 3rem;
      text-align: center;
  }

  @media screen and (max-width:1023px){
    html{
      font-size: 56%;
    }
  }
</style>
